<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { v4 } from 'uuid'
import { ref, watch } from 'vue'
import { useGoodsForm } from '../composables/useGoodsForm'
import { useI18n } from 'vue-i18n'

interface Props {
	editForm: any
	provinces: any[]
}

const props = defineProps<Props>()

const { getRemoteFrightColumns } = useGoodsForm()
const { locale } = useI18n()

const remoteFrightColumns = ref(getRemoteFrightColumns())

// 监听语言变化，更新表头
watch(locale, () => {
	remoteFrightColumns.value = getRemoteFrightColumns()
})

const addRemoteFright = () => {
	props.editForm.freightInfo.remoteFreights.unshift({
		id: 0,
		uuid: v4(),
		provinceId: '',
		appendFreightPrice: 0
	})
}

const delRemoteFreight = (uuid: string) => {
	Modal.confirm({
		title: t('操作.确认删除?'),
		icon: createVNode(ExclamationCircleOutlined),
		onOk() {
			props.editForm.freightInfo.remoteFreights.forEach((item, key) => {
				if (item.uuid === uuid) {
					props.editForm.freightInfo.remoteFreights.splice(key, 1)
				}
			})
		}
	})
}
</script>

<template>
	<div class="bg-white rounded-lg shadow-sm p-6">
		<a-divider class="text-lg font-semibold mb-6">{{ t('商品详细.运费信息') }}</a-divider>
		<div class="freightInfoOperate">
			<a-form
				ref="freightInfoFormRef"
				name="freightInfo"
				:model="editForm.freightInfo"
				:label-col="{ span: 4 }"
				:wrapper-col="{ span: 16 }">
				<a-form-item
					:label="t('商品详细.运费')"
					name="freightPrice"
					:rules="[
						{
							required: true,
							message: t('商品详细.请输入运费！')
						}
					]"
					:wrapper-col="{ span: 8 }">
					<a-input-number
						v-model:value="editForm.freightInfo.freightPrice"
						:placeholder="t('商品详细.请输入运费')"
						:min="0"
						:max="999999"></a-input-number>
				</a-form-item>
				<a-form-item :label="t('商品详细.追加运费')" :wrapper-col="{ span: 22 }">
					<a-button type="dashed" @click="addRemoteFright">
						<plus-outlined />
						{{ t('商品详细.添加追加运费') }}
					</a-button>
					<a-table
						v-if="editForm.freightInfo.remoteFreights.length > 0"
						:columns="remoteFrightColumns"
						:data-source="editForm.freightInfo.remoteFreights"
						:pagination="false"
						:bordered="true">
						<template #bodyCell="{ column, record }">
							<template v-if="column.dataIndex === 'provinceId'">
								<a-select
									v-model:value="record.provinceId"
									:placeholder="t('商品详细.请选择省份')"
									:options="provinces"
									style="width: 200px"></a-select>
							</template>
							<template v-if="column.dataIndex === 'appendFreightPrice'">
								<a-input-number
									v-model:value="record.appendFreightPrice"
									:placeholder="t('商品详细.请输入追加运费')"
									:min="0"
									:max="999999"
									style="width: 150px"></a-input-number>
							</template>
							<template v-if="column.dataIndex === 'action'">
								<a-button type="link" danger @click="delRemoteFreight(record.uuid)">
									{{ t('操作.删除') }}
								</a-button>
							</template>
						</template>
					</a-table>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<style lang="scss" scoped></style>
